<template>
  <div id="app">
    <MHeader />
    <Tab />
    <keep-alive>
      <router-view/>
    </keep-alive>
    <player></player>
  </div>
</template>

<script>
import MHeader from 'components/m-header/m-header'; // 头部组件
import Tab from 'components/tab/tab' // 推荐/歌曲/排行等的tab选项卡组件
import Player from 'components/player/player' // 播发器组件
export default {
  name: 'App',
  components: {
    MHeader,
    Tab,
    Player
  }
}
</script>

<style>
  /*
  * 报错：[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive
  * 介绍：由于浏览器必须要在执行事件处理函数之后，才能知道有没有调用过 preventDefault() ，这就导致了浏览器不能及时响应，略有延迟。
  * 解决方案：
  ** 1、注册处理函数时，用如下方式，明确声明为不是被动的;window.addEventListener('touchmove', func, { passive: false })
  ** 2、应用 CSS 属性 touch-action: none; 这样任何触摸事件都不会产生默认行为，但是 touch 事件照样触发。
  * 参考:https://segmentfault.com/a/1190000008512184
  */
  html {
    touch-action: none;
  }
</style>
